<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>家庭记账管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/AdminLTE.min.css"  />
    <link rel="stylesheet" href="/gradesign/assets/adminlte-2.3.7/css/skins/_all-skins.min.css" />
    <link rel="stylesheet" href="/gradesign/css/app.css" />
    <style type="text/css">
        body{
            font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
            line-height:1.42857143;
            font-size:14px;
        }
        .user-header{
            background-color: #f9f7f7;
        }
        .main-header,.logo,.main-sidebar,.navbar{
            background-color: #3d464d ;
           /*  border:solid 1px #eeeeee; */
        }
        /* .logo-lg{color:#000000;} */
        /* li.header{background-color: #3d464d !important;} */
        menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a{color: #3c8dbc!important;}
        .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a{/* background-color: #3d4674!important; */color: #eeeeee!important;border-left-color:#3d464d!important;}
        .skin-blue .sidebar-menu>li>.treeview-menu{background-color: #3d464d!important;color: rgba(255,25,255,0.8)!important;padding: 0px}
        .skin-blue .sidebar-menu>li{background-color: #3d464d!important;color: rgba(255,255,255,0.8)!important;/* border-style:  solid; */border-width:  1px ;border-color: #e7e7e7!important;border-top: none;border-right: none;border-left: none}
        .skin-blue .sidebar a{color: rgba(255,255,255,0.8);}
        .skin-blue.sidebar-menu>li>ul>li:hover>a, .skin-blue.sidebar-menu>li>ul>li.active>a{background-color: #eeeeee!important;color: rgba(255,255,255,0.8)!important;}
        .skin-blue .treeview-menu>li.active>a, .skin-blue .treeview-menu>li>a:hover{background-color: #3d464d!important;color: rgba(255,255,255,0.8)!important;}
        .skin-blue .sidebar-menu>li>.treeview-menu{border-left: none;padding-left: 0px}
        .skin-blue .treeview-menu>li>a{background-color:#3d464d;color: rgb(255,255,255,0.8)!important;}
        .sidebar-menu .treeview-menu>li>a{padding-left:35px;padding-top: 5px;padding-bottom: 5px}
        .sidebar-menu .treeview-menu>li:hover>a,.sidebar-menu .treeview-menu>li.active>a{background-color: #3d464d!important;color: #eeeeee!important;}
        .skin-blue .sidebar-menu>li>a{border-left: none}
        .sidebar-menu .treeview-menu>li>a{border-left: none}
        .skin-blue .main-header .navbar .sidebar-toggle:hover{background-color: #23527c!important;}
        .skin-blue .main-header .navbar .sidebar-toggle{background-color: #8aa4af}
        .skin-blue .user-panel>.info, .skin-blue .user-panel>.info>a{color: #fff}
        .skin-blue .sidebar-menu>li.header{font-size: larger}
        .dropdown-menu{width:160px !important;}
        .user-menu{height:50px}
        .msg_menu{width:250px !important}
        /* li.header {background-color: #23527c !important;} */
        /* .skin-blue .main-header .logo{background-color:#000079;} */
        /* .skin-blue .main-header .logo:hover{background-color:#000079;} */
        
        /* .menu-open:hover{background-color:#3d464d!important;} */
    </style>
</head>
<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wapper">
    <header class="main-header">
        <a href="/gradesign/index" class="logo">
           <span class="logo-lg">家庭记账管理系统</span>
           <!-- <img src ="/gradesign/logo/logov2.png" style="width: 250px;height: 40px;margin-left: -31px;margin-top: 3px;"></img> -->
        </a>
        <nav class="navbar navbar-static-top"  role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                	<li id="emailMenu" class="dropdown messages-menu">
                		<a href="#" class="dropdown-toggle" style="height:50px" data-toggle="dropdown" aria-expanded="true">
                			<i class="fa fa-envelope-o" style="color: white;  margin-top: 3px; "></i>
                			<span id="email_amount_head" class="label label-warning" style="color:red ;background-color:#00c0ef;    margin-top: 3px;" th:text="${push_email_amount}"></span>
                		</a>
                		<ul class="dropdown-menu msg_menu"> 
	                		<li class="header">你有<span id="email_amount" th:text="${push_email_amount}"></span>封未读邮件</li>
		                		<li>
		                			<div class="slimScroll" style="postion:relative;overflow:hidden;width:auto;height:200px;">
		                				<ul class="menu" style="overflow:hidden;width:100%;height:200px">
		                					<li id="email_content" th:each="email : ${push_email}">
		                						<a href="/gradesign/email/index" target="mainFrame">
		                							<div class="pull-left">
		                								<img th:src="${family.iconurl}" class="img-circle" alt="User Image"></img>
		                							</div>
		                							<h4 th:text="${email.email_subject}">
		                							<small style="margin-left: 40px;">
		                							<i class="fa fa-clock-o"></i><span th:text="${email.created_time}"></span>
		                							</small>
		                							</h4>
		                							<p th:text="${email.email_content}"></p>  
		                						</a>
		                					</li>
		                				</ul>
		                			</div>
		                		</li>
		                		<li class="footer">
		                			<a href="/gradesign/email/index" target="mainFrame">更多</a>
		                		</li>
                		</ul>
                	</li>
                	<li id="msgMenu" class="dropdown notifications-menu">
                		<a href="#" class="dropdown-toggle" style="height:50px" data-toggle="dropdown" aria-expanded="false">
                			<i class="fa fa-bell-o" style="color: white;    margin-top: 3px; "></i>
                			<span id="msg_amount_head" class="label label-warninf" style="color:red ;background-color: orange;    margin-top: 3px;" th:text="${push_msg_amount}"></span>
                		</a>
                		<ul class="dropdown-menu msg_menu"> 
	                		<li class="header">你有<span id="msg_amount" th:text="${push_msg_amount}"></span>条未读消息</li>
		                		<li>
		                			<div class="slimScrollDiv" style="postion:relative;overflow:hidden;width:auto;height:200px">
		                				<ul class="menu" style="overflow:hidden;width:100%;height:200px">
		                					<li id="msg_content">
		                						<a href="/gradesign/message/index" target="mainFrame" th:each="msg : ${push_msg}">
		                							<i class="fa fa-users text-aqua"></i><span th:text="${msg.content}"></span>
		                						</a>
		                					</li>
		                				</ul>
		                			</div>
		                		</li>
		                		<li class="footer">
		                			<a href="/gradesign/message/index" target="mainFrame">更多</a>
		                		</li>
                		</ul>
                	</li>
                    <li id="userMenu" class="dropdown user-menu" th:each="family : ${family}">
                        <a href="#" class="dropdown-toggle" style="height:50px" height="50px" data-toggle="dropdown">
                            <img th:src="${family.iconurl}" width="50px" height="50px" alt="User Image" class="user-image" />
                            <span  th:text="${family.familyname}"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                        	<li>
                        		<a href="/gradesign/familyInfo" target="mainFrame">
                        			<i class="fa fa-user fa-fw"></i>
                        			<span>家庭信息</span>
                        		</a>
                        	</li>
                        	<li>
                        		<a href="/gradesign/logout">
                        			<i class="fa fa-sign-out fa-fw"></i>
                        			<span>退出登录</span>
                        		</a>
                        	</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar" >
        <section class="sidebar" style="background:#3d464d;">
            <div class="user-panel" th:each="family : ${family}">
                <div class="pull-left image">
                    <img th:src="${family.iconurl}" width="40px" height="60px" alt="User Image" class="user-image" style="border-radius: 50%;height: 45px;"/>
                </div>
                <div class="pull-left info" >
                    <h4 th:text="${family.familyname}"></h4>
                </div>
            </div>
            <ul class="sidebar-menu" style="background:#3d464d;">
                <li class="header">菜单</li>
                <li class="treeview" th:each="menuList : ${menuLists}" style="background:#3d464d;">
              		<a th:href="${menuList.menu_url}" target="mainFrame">
                        <i th:class="${menuList.icon_type}"></i>
                        <span th:text="${menuList.menu_name}" ></span>
                	</a>
                </li>
                <li class="treeview" >
                    <a href="#">
                        <i class="fa fa-folder"></i>
                        <span th:text="账单"></span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="/gradesign/bill/listBill" target="mainFrame"><i class="fa fa-table"></i><b>流水账单</b></a>
                            <a href="/gradesign/bill/cateBill" target="mainFrame"><i class="fa fa-pie-chart"></i><b>分类账单</b></a>
                        </li>
                    </ul>
                </li>
                <!-- <li class="treeview">
                	<a href="/gradesign/map/mapIndex" target="mainFrame"><i class="fa fa-calendar"></i><span>&nbsp;地图</span></a>
                </li> -->
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <!-- 在SpringBoot中使用src会自动交给MVC的dispatcher来识别映射 -->
        <iframe name="mainFrame" id="mainFrame" src="/gradesign/main/index" frameborder="false" scrolling="yes" style="border:none;" width="100%" height="100%" allowtransparency="true"></iframe>
    </div>
    
</div>

</body>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/js/app.min.js"></script>
<script type="text/javascript" src="/gradesign/assets/adminlte-2.3.7/js/demo.js"></script>
<script type="text/javascript" src="/gradesign/js/index.js"></script>
<script type="text/javascript" src="/gradesign/js/login.js"></script>
<script type="text/javascript" >
	$(function(){
		setInterval('reloadPushMsg()',10000);
		$(".slimScroll").slimScroll({
			height : '200px'
		});
	});
	//获取iframe
	var fr = document.getElementById("mainFrame");
	//iframe单独加载，需要在加载时创建监听点击事件
	fr.onload = function(){
		//点击iframe事件
		fr.contentDocument.onclick = function(){
			//dropdown展开时class值带有open，判断
			if($("#emailMenu").attr("class") == "dropdown messages-menu open"){
				//给dropdown的class赋值，去掉open，dropdown即隐藏
				$("#emailMenu").attr("class","dropdown messages-menu");
			}
			if($("#msgMenu").attr("class") == "dropdown notifications-menu open"){
				$("#msgMenu").attr("class","dropdown notifications-menu");
			}
			if($("#userMenu").attr("class") == "dropdown user-menu open"){
				$("#userMenu").attr("class","dropdown user-menu");
			}
		}
	}
	function reloadPushMsg(){
		$.ajax({
			url : '/gradesign/message/reloadPushMsg',
			type : 'get',
			data : {},
			dataType : 'json',
			success : function (data){
				document.getElementById("msg_amount").innerHTML = data.push_msg_amount;
				document.getElementById("msg_amount_head").innerHTML = data.push_msg_amount;
				document.getElementById("msg_content").innerHTML = data.push_msg;
				/* debugger; */
			}
		})
	}
	$("#mainFrame").click(function(){
		$(".dropdown-menu").style.display="none";
	})
</script>
</html>